<script setup>

import LastWeather from "@/views/Weather/cpns/LastWeather.vue";
import WeatherStatistics from "@/views/Weather/cpns/WeatherStatistics.vue";
import WindSituation from "@/views/Weather/cpns/WindSituation.vue";
import SettingTable from "@/components/SettingTable.vue";
import WeatherTable from "@/views/Weather/cpns/WeatherTable.vue";
import {ref} from "vue";
import useWeatherStore from "@/stores/modules/useWeather";
import {storeToRefs} from "pinia";
import Footer from "@/components/Footer.vue";

const weatherStore=useWeatherStore()
weatherStore.fetchSevenDayWeather()
weatherStore.fetchWeatherStatistics()
weatherStore.fetchWind()
const {sevenDayWeather,weatherStatistics,wind}=storeToRefs(weatherStore)
const params=ref([
  {
    label:"气温权重",
    value:""
  },
  {
    label: "云层厚度权重",
    value: ""
  },
  {
    label: "光照权重",
    value: ""
  },
  {
    label: "气旋权重",
    value: ""
  },
  {
    label: "其他权重",
    value: ""
  },
])
</script>

<template>
  <div id="" class="weather-content">
    <div class="weather-left">
      <LastWeather :sevenDayWeather="sevenDayWeather"></LastWeather>
      <WeatherStatistics :weatherStatistics="weatherStatistics"></WeatherStatistics>
      <WindSituation :wind="wind"></WindSituation>
    </div>
    <div class="weather-right">
      <SettingTable :params="params"></SettingTable>
      <div class="weather-right2">
        <WeatherTable></WeatherTable>
      </div>
    </div>
  </div>
  <Footer></Footer>
</template>

<style scoped>
.weather-content {
  height: 100%;
  display: flex;
  background-color: #ffffff;
  overflow: hidden;
}

.weather-left {
  display: flex;
  width: 66.666%;
  height: 100%;
  //margin-top:40px;
  flex-direction: column;
}

.weather-left-item {
  //height: 33.333%;
}

.weather-left > div {
  width: 100%;
  height: 100%;
  //flex-grow: 1;
}

.weather-right {
  width: 33.333%; /*有实际表注释掉，发挥左:右=2:1*/
  align-items: center;
  display: flex;
  margin-top: 30px;
  flex-direction: column;
}

.weather-right > div {
  //width: 100%; /**/
  //flex-grow: 1;
}

.weather-right2 {
  display: flex;
  justify-content: center;
}


@media screen and (max-width: 2000px) {
  .weather-content {
    height: 1200px; /*1200px*/
    /*width:143%;*/
  }

  .weather-left {
    /*flex-grow:2;*/
  }

  .weather-right {
    width: 61%; /*调左右比例*/
    margin: 0px;
    padding-right: 5px; /*加*/
    /*flex-grow:1;*/
    /*border:1px solid blue;*/
  }

  .heat-right1 {
    padding-right: 35px;
    /*border:1px solid blue;*/
  }
}
</style>
<!--2024/2/6 18:49-->